// Highlighted Links
@mixin active-highlight($color:rgba(255, 255, 255, 0.15)) {
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: $color;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: 0;
    pointer-events: none;
    transition-duration: 600ms;
  }

  &.active-state::before,
  html:not(.watch-active-state) &:active::before {
    opacity: 1;
    transition-duration: 150ms;
  }
}
@mixin active-highlight-color($color) {
  &::before {
    background-image: -webkit-radial-gradient(center, circle cover, $color 66%, rgba(red($color), green($color), blue($color), 0) 66%);
    background-image: radial-gradient(circle at center, $color 66%, rgba(red($color), green($color), blue($color), 0) 66%);
  }
}
